{% extends 'base.html' %}

{% block content %}
<div class="container mt-4">
    <!-- 返回按钮 -->
    <div class="mb-4">
        <a href="javascript:history.back()" class="btn btn-outline-secondary">
            ← 返回
        </a>
    </div>

    <div class="row">
        <!-- 主内容区 -->
        <div class="col-lg-8">
            <!-- 景点标题和基本信息 -->
            <div class="card mb-4">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <div>
                            <h1 class="mb-2">{{ attraction.poi_name }}</h1>
                            <div class="d-flex align-items-center mb-3">
                                {% if attraction.comment_score %}
                                <span class="badge bg-warning text-dark me-2">
                                    ★{{ attraction.comment_score }}分
                                </span>
                                {% endif %}
                                {% if attraction.sight_level %}
                                <span class="badge bg-info text-white me-2">
                                    {{ attraction.sight_level }}
                                </span>
                                {% endif %}
                                {% if attraction.is_free == '0' %}
                                <span class="badge bg-success text-white">
                                    免费景点
                                </span>
                                {% endif %}
                            </div>
                        </div>
                        {% if attraction.heat_score %}
                        <div class="text-end">
                            <span class="text-danger">🔥 热度 {{ attraction.heat_score }}</span>
                        </div>
                        {% endif %}
                    </div>

                    <!-- 封面图 -->
                    {% if attraction.cover_image_url %}
                    <div class="mb-4">
                        <img src="{{ attraction.cover_image_url }}"
                             alt="{{ attraction.poi_name }}封面图"
                             class="img-fluid rounded"
                             style="max-height: 400px; width: 100%; object-fit: cover;">
                    </div>
                    {% endif %}

                    <!-- 标签 -->
                    {% if attraction.tag_name_list %}
                    <div class="mb-3">
                        {% for tag in attraction.tag_name_list %}
                        <span class="badge bg-light text-dark me-1 mb-1">{{ tag }}</span>
                        {% endfor %}
                    </div>
                    {% endif %}

                    <!-- 简短特色 -->
                    {% if attraction.short_features %}
                    <div class="alert alert-light mb-3">
                        <h5 class="alert-heading">特色亮点</h5>
                        <p class="mb-0">{{ attraction.short_features }}</p>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- 景点介绍 -->
            {% if attraction.introduce %}
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">景点介绍</h5>
                    <div class="content-text">
                        {{ attraction.introduce|linebreaks }}
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- 分类信息 -->
            {% if attraction.sight_category_info %}
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">分类信息</h5>
                    <div class="row">
                        {% for category in attraction.sight_category_info %}
                        <div class="col-md-6 mb-2">
                            <div class="d-flex">
                                <span class="text-muted me-2">{{ category.key }}：</span>
                                <span>{{ category.value }}</span>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}

            <!-- 服务设施 -->
            {% if attraction.service_facility_list %}
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title mb-3">服务设施</h5>
                    <div class="row">
                        {% for facility in attraction.service_facility_list %}
                        <div class="col-md-6 mb-2">
                            <div class="d-flex align-items-center">
                                <span class="badge bg-light text-dark me-2">{{ facility.key }}</span>
                                <span>{{ facility.value }}</span>
                            </div>
                        </div>
                        {% endfor %}
                    </div>
                </div>
            </div>
            {% endif %}
        </div>

        <!-- 侧边栏信息 -->
        <div class="col-lg-4">
            <!-- 实用信息卡片 -->
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">实用信息</h5>

                    <!-- 位置信息 -->
                    <div class="mb-3">
                        <h6 class="text-muted small">位置信息</h6>
                        {% if attraction.city_name %}
                        <p class="mb-1"><strong>城市：</strong>{{ attraction.city_name }}</p>
                        {% endif %}
                        {% if attraction.zone_name %}
                        <p class="mb-1"><strong>区域：</strong>{{ attraction.zone_name }}</p>
                        {% endif %}
                        {% if attraction.address %}
                        <p class="mb-1"><strong>地址：</strong>{{ attraction.address }}</p>
                        {% endif %}
                    </div>

                    <!-- 联系方式 -->
                    {% if attraction.phone %}
                    <div class="mb-3">
                        <h6 class="text-muted small">联系方式</h6>
                        <p>{{ attraction.phone }}</p>
                    </div>
                    {% endif %}

                    <!-- 开放时间 -->
                    {% if attraction.opening_hours %}
                    <div class="mb-3">
                        <h6 class="text-muted small">开放时间</h6>
                        <p>{{ attraction.opening_hours }}</p>
                    </div>
                    {% endif %}

                    <!-- 门票信息 -->
                    <div class="mb-3">
                        <h6 class="text-muted small">门票信息</h6>
                        {% if attraction.is_free == '0' %}
                        <p class="text-success">免费开放</p>
                        {% else %}
                            {% if attraction.market_price %}
                            <p><strong>参考价格：</strong>¥{{ attraction.market_price }}</p>
                            {% endif %}
                        {% endif %}
                    </div>

                    <!-- 优惠政策 -->
                    {% if attraction.preferential_policies_list %}
                    <div>
                        <h6 class="text-muted small">优惠政策</h6>
                        <ul class="list-unstyled">
                            {% for policy in attraction.preferential_policies_list %}
                            <li class="mb-1">• {{ policy }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                </div>
            </div>

            <!-- 高德地图 -->
            <div class="card mb-4">
                <div class="card-body">
                    <h5 class="card-title">位置地图</h5>
                    <div id="mapContainer" style="height: 250px;">
                        {% if attraction.latitude and attraction.longitude %}
                        <!-- 高德地图容器 -->
                        <div id="map" style="height: 100%;"></div>
                        {% else %}
                        <p class="text-center text-muted py-5">暂无位置信息</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .content-text {
        line-height: 1.8;
    }
    .content-text img {
        max-width: 100%;
        height: auto;
        margin: 10px 0;
        border-radius: 4px;
    }
</style>

<!-- 高德地图 API -->
{% if attraction.latitude and attraction.longitude %}
<script type="text/javascript">
    // 高德地图 API Key
    const apiKey = 'bb1d70f1391d1be84727da10cb107831';

    // 初始化地图
    function initMap() {
        const map = new AMap.Map('map', {
            zoom: 15, // 初始缩放级别
            center: [{{ attraction.longitude }}, {{ attraction.latitude }}] // 初始中心点
        });

        // 添加标记
        const marker = new AMap.Marker({
            position: [{{ attraction.longitude }}, {{ attraction.latitude }}],
            map: map
        });
    }

    // 加载高德地图 API
    function loadMapScript() {
        const script = document.createElement('script');
        script.src = `https://webapi.amap.com/maps?v=1.4.15&key=${apiKey}&callback=initMap`;
        script.async = true;
        document.head.appendChild(script);
    }

    // 页面加载完成后加载地图
    window.onload = loadMapScript;
</script>
{% endif %}
{% endblock %}